<template>
  <div class="app-container">

    <el-form  >
      <el-form-item prop="attr_name" >
        <el-col :span="21">
          <el-button type="primary" @click="dialogFormVisible1 = true">上传EXCEL导入学生信息<i class="el-icon-upload el-icon--right"></i></el-button>
          <el-input v-model="key" placeholder="输入学号搜索学生" clearable  style="width:15%" @clear="listAll"></el-input>
          <el-button icon="el-icon-search" circle @click="search"></el-button>
        </el-col>
      </el-form-item>
    </el-form>


    <el-dialog title="导入EXCEL" :visible.sync="dialogFormVisible1">
      <el-upload
        class="upload-demo"
        action="http://101.33.210.8:8005/main/user/add"
        data=""
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="handSuccess"
        :on-error="handError"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
      </el-upload>

    </el-dialog>


    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible2">

      <el-form ref="form" :model="user" label-width="80px">

        <el-form-item label="账号">
          <el-input v-model="user.account" placeholder=" 示例：1900301310"/>
        </el-form-item>

        <el-form-item label="密码">
          <el-button type="danger" round @click="reset">重置密码</el-button>
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="user.mail" placeholder=" 示例：123@qq.com"/>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="user.phone" placeholder=" 示例：1900301310"/>
        </el-form-item>

        <el-form-item label="预约次数">
          <el-input v-model="user.reserveNumber" placeholder=" 示例：1900301310"/>
        </el-form-item>

        <el-form-item label="取消次数">
          <el-input v-model="user.reserveNumberCancel" placeholder=" 示例：1900301310"/>
        </el-form-item>

        <el-form-item label="状态">
          <el-switch
            v-model="user.state"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button  @click="dialogFormVisible2 = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row>

      <el-table-column prop="account" label="学号" />

      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="mail" label="邮箱"/>
      <el-table-column prop="phone" label="电话"/>
      <el-table-column prop="reserveNumber" label="剩余预约次数"/>
      <el-table-column prop="reserveNumberCancel" label="剩余取消预约次数"/>

      <el-table-column type="status" prop="cover" label="状态" sortable >
        <template   slot-scope="scope" >
          <el-tag type="info" v-if="scope.row.state==0">已禁用</el-tag>
          <el-tag type="success" v-else>正常</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="getById(scope.row.id)">修改</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import user from "../../api/user"
import time_slice from "../../api/time_slice";
export default{
  data(){
    return{
      list:null,//查询后的接口集合
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      fileList: [],
      user:{
        id:'',
        account:'',
        name:'',
        password:'',
        mail:'',
        phone:'',
        reserveNumber:'',
        reserveNumberCancel:'',
        state:'',
        isDeleted:'',
        gmtCreate:'',
        gmtModified:''
      },
      key:""
    }
  },
  created(){
    this.listAll()
  },
  methods:{

    listAll(){
      user.list()
        .then(response=>{
          this.list=response.data.list
        })
    },

    handleRemove(file, fileList) {
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handSuccess(response) {
      this.dialogFormVisible = false
      this.$notify({
        title: '成功',
        message: '导入成功',
        type: 'success'
      });
      this.dialogFormVisible1 = false;
      this.listAll()
    },
    handError(){
      this.dialogFormVisible = false
      this.$notify.error({
        title: '错误',
        message: '导入失败'
      });
    },

    deleteById(id){
      user.deleteById(id)
        .then(response=>{
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.listAll()
        })
    },
    save() {
      user.update(this.user)
        .then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.dialogFormVisible2 = false
          this.listAll()
        })
    },
    getById(id) {
      user.getById(id)
        .then(response=>{
          this.user = response.data.user
          this.dialogFormVisible2 = true
        })
    },

    reset(){
     user.reset(this.user.id)
      .then(response=>{
        this.user.password = response.data.password
      })
    },
    search(){
      user.search(this.key)
      .then(response=>{
        this.list = response.data.list
      })
    }
  }
}
</script>
<style>

</style>
